import React, { Component } from 'react'
import './css/tabbar.css'

export default class Tabbar extends Component {
  state = {
    buttons: [
      {
        id: 1,
        name: '电影',
      },
      {
        id: 2,
        name: '影院',
      },
      {
        id: 3,
        name: '我的',
      },
    ],
    currentIndex: 0,
  }

  render() {
    return (
      <ul className='tabbar'>
        {this.state.buttons.map((item, index) => {
          return (
            <li
              key={item.id}
              className={this.state.currentIndex === index ? 'active' : ''}
              onClick={() => this.handleClick(index)}
            >
              {item.name}
            </li>
          )
        })}
      </ul>
    )
  }

  handleClick = (index) => {
    this.setState({ currentIndex: index })
  }
}
